<script setup>
import { Right } from '@element-plus/icons-vue'
import { ref } from 'vue'
defineProps({
  title: '',
  text: '',
  more: false
})
const emit = defineEmits(['moreClick'])
function clickMore() {
  emit('moreClick')
}
</script>

<template>
  <div>
    <div class="title-box">
      <div class="title">{{ title }}</div>
      <div class="text">{{ text }}
        <div v-if="more" class="more" @click="clickMore">
          查看更多
          <el-icon style="margin-left: 10px;">
            <Right />
          </el-icon>
        </div>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<style lang="less" scoped>
.title-box {
  position: relative;

  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ABABAB;
    line-height: 24px;
  }

  .text {
    width: 121px;
    height: 29px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1A1A1A;
    margin-bottom: 22px;

    .el-icon {
      vertical-align: baseline;
    }

    .more {
      position: absolute;
      right: 0;
      top: 15px;
      display: inline-block;
      background: rgba(247, 249, 250, 0);
      border: 1px solid #1891FF;
      border-radius: 15px;
      padding: 4px 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1891FF;
      line-height: 24px;
      cursor: pointer;
    }
  }
}
</style>
